import { FC, Ref, useEffect, useState } from 'react';
import { Modal } from 'antd';
import { useStores } from '@/stores';
import './index.less';
import { observer } from 'mobx-react-lite';
import { FLAW_CARD_DETAIL, imgUrl } from '@/utils/constant';
import { runInAction } from 'mobx';

export interface FlawDetailConf {
  onRef?: Ref<any> | undefined;
  onSubmit?: (labelInfo: any) => void;
}

const CardDetailDialog: FC<FlawDetailConf> = (FlawDetailProps: FlawDetailConf) => {
  const { lotStore } = useStores();
  const [flawCardDetails, setFlawCardDetails] = useState<Record<string, Object>>({});
  const [flawCardData, setFlawCardData] = useState<Record<string, string | number>>({});

  // 增加检测类型参数
  useEffect(() => {
    if (lotStore.card.detailShowDialog === true) {
      const data = { ...lotStore.card.detailFlawRow, ...JSON.parse(lotStore.card.detailFlawRow.exInfo) } as unknown as Record<string, string | number>;
      setFlawCardData(data);

      const flawCardDetailsFields = { ...FLAW_CARD_DETAIL };
      Object.keys(data).forEach(item => {
        // 根据传递过来的数据字段来判断是否展示哪些字段
        if (lotStore.card.flawAlias.hasOwnProperty(item)) {
          flawCardDetailsFields[item] = { name: lotStore.card.flawAlias[item], key: item };
        }
      });
      // console.log('cloumn', flawCardDetailsFields);
      // console.log('data', JSON.parse(JSON.stringify(data)), Object.keys(data).length);

      setFlawCardDetails(flawCardDetailsFields);
    }
  }, [lotStore.card.detailShowDialog]);

  // 点击-确定
  const handleSelect = async () => {
    runInAction(() => {
      lotStore.card.detailShowDialog = false;
    });
  };

  return (
    <Modal
      title="缺陷卡片详情"
      open={lotStore.card.detailShowDialog}
      onOk={handleSelect}
      width={800}
      onCancel={() => {
        runInAction(() => {
          lotStore.card.detailShowDialog = false;
        });
      }}
      wrapClassName="flawCardDetailDialog"
      footer={null}
    >
      <div className="card-detail">
        <div className="card-left">
          <div className="card-img">
            <img src={lotStore.card.detailFlawRow?.imgPath || ''} alt="" />
          </div>
        </div>
        <div className="card-info">
          {Object.keys(flawCardDetails).map((key, index) => (
            <div className="name" key={key}>
              {`[${index + 1}]`}： {flawCardDetails[key]['name']}：{flawCardData.hasOwnProperty(key) ? flawCardData[key] : ''}
            </div>
          ))}
        </div>
      </div>
    </Modal>
  );
};
export default observer(CardDetailDialog);
